<template>
  <div>
    <canvas id="little-gltf-model" style="width: 100%; height: 39vh"></canvas>
  </div>
</template>

<script>
import * as THREE from 'three/build/three.module.js'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

export default {
  name: "LittleGLTFModule",
  props: ['devId'],
  data() {
    return {
      // 控制信息卡片是否显示
      showInfoCard: false
    }
  },
  mounted() {
    this.initThree()
  },
  methods: {
    initThree() {
      const scene = new THREE.Scene()

      const canvas = document.querySelector('#little-gltf-model')
      // alpha透明
      const renderer = new THREE.WebGLRenderer({canvas, antialias: true, alpha:true})
      renderer.shadowMap.enabled = true
      renderer.setClearAlpha(0.0);

      const camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
      )
      camera.position.z = 10

      // 导入泳池场馆的gltf模型
      const gltfLoader = new GLTFLoader()
      let pool = null
      gltfLoader.load('/models/pool/untitled.gltf',
          (gltf) => {
            pool = gltf.scene
            pool.scale.set(0.2, 0.2, 0.2)
            pool.position.set(-2, -3, -5)
            scene.add(pool)
          },
          (xhr) => {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded')
          },
          (error) => {
            console.log('An error happened: ' + error);
          }
      )

      // 导入设备的gltf模型
      const deviceLoader = new GLTFLoader()
      let device = null
      deviceLoader.load('/models/device/device.gltf',
          (gltf) => {
            device = gltf.scene
            device.position.x += 6
            device.position.y += 5
            device.scale.set(0.8, 0.8, 0.8)
            device.rotateZ(Math.PI / 2 * 3)
            scene.add(device)
          },
          (xhr) => {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded')
          },
          (error) => {
            console.log('An error happened: ' + error);
          }
      )

      const hemLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.8)
      hemLight.position.set(0, 48, 0)
      scene.add(hemLight)

      const dirLight = new THREE.DirectionalLight(0xffffff, 0.6)
      //光源等位置
      dirLight.position.set(-10, 8, -5)
      //可以产生阴影
      dirLight.castShadow = true
      dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024)
      scene.add(dirLight)

      const controls = new OrbitControls(camera, renderer.domElement)
      controls.enableDamping = true

      function animate() {
        controls.update()
        renderer.render(scene, camera)
        requestAnimationFrame(animate)

        // 旋转
        device.rotation.y += 0.02
        pool.rotation.y += 0.01

        if (resizeRendererToDisplaySize(renderer)) {
          const canvas = renderer.domElement
          camera.aspect = canvas.clientWidth / canvas.clientHeight
          camera.updateProjectionMatrix()
        }
      }

      animate()

      function resizeRendererToDisplaySize(renderer) {
        const canvas = renderer.domElement
        let width = window.innerWidth
        let height = window.innerHeight
        let canvasPixelWidth = canvas.width / window.devicePixelRatio
        let canvasPixelHeight = canvas.height / window.devicePixelRatio

        const needResize =
            canvasPixelWidth !== width || canvasPixelHeight !== height
        if (needResize) {
          renderer.setSize(width, height, false)
        }
        return needResize
      }
    },
  },
}
</script>

<style scoped>
#gltf-model {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

#label {
  position: absolute;
  width: 150px;
  padding: 10px;
  background: rgba(255, 255, 255, 0);
  line-height: 1;
  border-radius: 5px;
}

.info-card {
  color: #f0f0f0;
}
</style>
